<template>
    <div class="content-box" id="consultingDetails">
        <div class="title">
            <p class="leftTip">预约单信息</p>
            
        </div>
        <ul class="flex_layout u_mt_10 u_ml_10">
            <li class="flex_1">
                <div class="labelP">真实姓名：  <span class="contentP">测试</span></div>
            </li>
            <li  class="flex_1">
                <div class="labelP">订单生成时间：  <span class="contentP">测试</span></div>
            </li>
            <li class="flex_1">
                <div class="labelP">订单状态：  <span class="contentP">测试</span></div>
            </li>
        </ul>
        <ul class="flex_layout u_mt_10 u_ml_10">
            <li class="flex_1">
                <div class="labelP">预约咨询师：  <span class="contentP">测试</span></div>
            </li>
            <li  class="flex_1">
                <div class="labelP">来访者姓名：  <span class="contentP">测试</span></div>
            </li>
            <li class="flex_1">
                <div class="labelP">来访者联系电话：  <span class="contentP">测试</span></div>
            </li>
        </ul>
        <ul class="flex_layout u_mt_10 u_ml_10">
            <li class="flex_1">
                <div class="labelP">预约咨询时长：  <span class="contentP">测试</span></div>
            </li>
            <li  class="flex_1">
                <div class="labelP">预约时间：  <span class="contentP">测试</span></div>
            </li>
            <li class="flex_1">
                <div class="labelP">咨询方式：  <span class="contentP">测试</span></div>
            </li>
        </ul>

         <div class="title">
            <p class="leftTip">修改咨询信息</p>
        </div>
        <div class="">
            <div v-if="!state.classInfo" class="requiredSpan textCenter">该咨询师还没有排班</div>
            <div v-else>

            </div>
        </div>
        <ul class="flex_layout u_mt_10 u_ml_10">
            <li class="flex_1">
                <div class="labelP">
                    <p class="conStyleP">咨询方式： </p>  
                    <el-radio-group v-model="state.info.reservationInfo.consultStyle">
                        <el-radio-button label="视频咨询" />
                        <el-radio-button label="面对面" />
                    </el-radio-group>
                </div>
            </li>
        </ul>
        
        <div class="footerBtn textCenter">
            <el-button type="primary">确定修改</el-button>
        </div>

    </div>
    
</template>

<script lang="ts" setup>
import { ref , reactive, computed, watch} from 'vue'
import { ElMessage, ElMessageBox, FormInstance, } from 'element-plus'
import { Module } from 'vuex';

import { onBeforeRouteLeave, useRouter } from "vue-router";
import {useStore} from "vuex";



const store = useStore();
const router = useRouter();

let state: any = reactive({
    crumbList: computed(() => store.getters.getCrumbList),
    isSidebarNavCollapse: computed(
        () => store.getters.getIsSidebarNavCollapse
    ),
    msgNum: computed(() => store.getters.getMsgNum),
    classInfo:'',
    info:{
        reservationInfo:{
            name: '测试',
            createTime: "2022-12-12 12:12:34",
            statedesc: '正常',
            counselorName: '测试',
            visitorName: '张三',
            visitorPhone: '12233332222',
            duration: '1',
            appointTime: '2022-12-13 :13:30:00',
            consultStyleDesc: '视频咨询',
            consultStyle: '1'
        }
        
    }
});

const editFlag = ref(false);
watch(state.info.reservationInfo, (newVal, oldVal) => {
    editFlag.value = true
    console.log(newVal, oldVal)
})

onBeforeRouteLeave((to, from, next) => {
    if(editFlag.value){
        ElMessageBox.confirm(
        '当前页面修改数据为保存，确定离开吗?',
        '温馨提示',
        {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        }
    )
        .then(() => {
            next()
        })
        .catch(() => {
            return false;
        })
    }else{
        next()
    }
})

</script>


<style scoped lang="scss">
    #consultingDetails{
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
        line-height: 30px;
        .title{
            margin-top: 10px;
        }
    }
    .conStyleP{
        float: left;
        line-height: 30px;
        width: 100px;
    }
    .footerBtn{
        margin-top: 100px;
        button{
            width: 400px;
        }
    }
</style>